<template>
  <div class="h-max">
    <el-tabs
      v-model="state.editorFilesId"
      type="card"
      closable
      @tab-remove="tabsRemove"
      @tab-click="tabsClick"
    >
      <el-tab-pane
        v-for="item in state.editorFiles"
        :key="item.id"
        :name="item.id"
      >
        <span slot="label">
          <svg-icon :icon-class="iconName(item.display, item.label)" />
          {{ itemLabel(item) }}
        </span>
        <component
          :is="currentTabComponent(item)"
          v-bind="currentTabProps(item)"
          v-on="currentTabEvents(item)"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
/**
 * 编辑器组件，需要传入state作为pros
 */
import editor from 'vue2-ace-editor';
import VariableView from './VariableView';
export default {
  components: {
    editor,
    VariableView
  },
  props: {
    state: {
      type: Object,
      required: true
    },
    editorInit: {
      type: Function,
      required: true
    },
    tabsRemove: {
      type: Function,
      required: true
    },
    tabsClick: {
      type: Function,
      default: undefined
    }
  },
  data() {
    return {
      editorOptions: {
        // 设置代码编辑器的样式
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true,
        tabSize: 2,
        fontSize: 14,
        showPrintMargin: false // 去除编辑器里的竖线
      }
    };
  },
  methods: {
    currentTabComponent(item) {
      const dict = {
        file: 'editor',
        variable: 'variable-view'
      };
      return dict[item.display];
    },
    currentTabProps(item) {
      const editorProps = {
        value: item.editContent,
        lang: 'python',
        options: this.editorOptions,
        theme: 'chrome',
        width: '100%',
        key: `editor_${item.id}`
      };
      const variableProps = {
        variable: item.value
      };
      return item.display === 'file' ? editorProps : variableProps;
    },
    currentTabEvents(item) {
      const editorEvents = {
        input: (event) => {
          // event即为修改后的值
          item.editContent = event;
        },
        init: this.editorInit
      };
      return item.display === 'file' ? editorEvents : {};
    },
    iconName(type, name) {
      if (type === 'file') {
        const index = name.lastIndexOf('.');
        if (index === -1 || !name.slice(index + 1)) {
          return 'file';
        } else {
          return name.slice(index + 1);
        }
      } else {
        return 'variable';
      }
    },
    itemLabel(item) {
      if (item.display === 'file') {
        if (item.editText !== item.editContent) {
          return '文件-' + item.label + ' *';
        } else {
          return '文件-' + item.label;
        }
      } else {
        return `变量-` + item.label;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-tabs.el-tabs--card.el-tabs--top {
  height: 100%;

  .el-tab-pane {
    height: 100%;
  }

  .el-tabs__header {
    margin-bottom: 0;
  }

  .el-tabs__content {
    height: calc(100% - 41px);
  }
}
</style>

<style lang="scss">
.ace_editor.ace_autocomplete {
  width: 340px !important;
}
</style>
